<template>
	<div class="app-container">
		<!--弹窗-->
		<el-dialog :title="infoDialog.title" width="600px" :close-on-click-modal="false"
				:visible.sync="infoDialog.visible" @open="handleOpen('infoEditForm')" @close="handleClose('infoEditForm')">
		  <el-form :model="infoDialog.info" :rules="rules" ref="infoEditForm" label-width="60px">
		    <el-form-item label="编号" prop="projectId">
				<el-input v-model="infoDialog.info.projectId" placeholder="4-20位的数字、字母、横线或下划线" :disabled="infoDialog.option==1"></el-input>
		    </el-form-item>
            <el-form-item label="环境" prop="envs">
                <el-checkbox-group v-model="infoDialog.info.envs">
                    <el-checkbox v-for="env in envOptions" :label="env" :key="env">{{env}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="状态" prop="usable" v-if="infoDialog.option==1">
			  <el-switch v-model="infoDialog.info.usable" active-color="#13ce66" :active-text="infoDialog.info.usable? '已启用': '已禁用'"></el-switch>
            </el-form-item>
		    <el-form-item label="描述" prop="projectDesc">
				<el-input v-model="infoDialog.info.projectDesc" type="textarea" :rows="3" :maxlength="100" show-word-limit placeholder="项目描述"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="handleClose('infoEditForm')">取消</el-button>
		    <el-button :loading="loading" type="primary" @click="handleSave('infoEditForm')">确定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>


<script>
	export default {
		props: {
		  infoDialog: {}
		},
		data() {
            let validateCode = (rule, value, callback) => {
                let reg = new RegExp(/^[A-Za-z0-9_-]{4,30}$/);
                if (!reg.test(value)) {
                    callback(new Error('项目编号格式为4-20位的数字、字母、横线或下划线'));
                } else {
                    callback();
                }
            }
			return {
				loading: false,
                envOptions: [],
				rules: {
					projectId: [
						{ required: true, message: '请输入项目编号' },
                        { validator: validateCode, trigger: 'blur' }
					],
                    envs: [
                    	{ required: true, message: '请选择支持环境' }
                    ],
				}
			}
		},
		methods: {
			handleSave(form) {
				this.$refs[form].validate(valid => {
					if (!valid) {
						return;
					}
					this.loading = true;
					let params = {
                        projectId: this.infoDialog.info.projectId,
                        projectDesc: this.infoDialog.info.projectDesc,
                        usable: this.infoDialog.info.usable,
                        envs: this.infoDialog.info.envs
                    };
                    let url = this.infoDialog.option==1? this.api.projectModify: this.api.projectAppend;
					this.$http.fetch(url, params)
						.then(data => {
							this.$message({ message: this.infoDialog.option==1? '项目修改成功！': '项目创建成功！', type: 'success' });

							this.$emit("update"); //更新父组件
							this.handleClose(form); //清空内容
							this.loading = false;
						}).catch(err=> {
                            this.loading = false;
                        });
				});
			},
            async handleOpen(form) {
                let data = await this.$http.fetch(this.api.projectEnvs);
                this.envOptions = data;
            },
			handleClose(form) {
				this.infoDialog.visible = false;
				this.infoDialog.info = {};
                this.infoDialog.info.envs = [];
				this.$refs[form].resetFields(); //重置form
			}
		}
	}
</script>
<style scoped>

</style>
